<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
	<body>
		
		
		<div id="app" class="container">
			  <br><br><br>
			 <table class="table table-bordered table-striped table-hover">
			 	<tr>
					<td>编号</td>
					<td>商品名</td>
					<td>商品图片</td>
					<td>商品价格</td>
					<td>数量</td>
					<td>小计</td>
					<td>操作</td>
				</tr>
			 	<tr v-for="(product,index) in products">
			 		<td>{{index+1}}</td>
			 		<td>{{product.name}}</td>
			 		<td> <img width="140px" :src="product.img"  ></td>
			 		<td> {{product.price}}元</td>
			 		<td> <button @click="product.number++">+</button> {{product.number}} <button :disabled="product.number == 1" @click="product.number--">-</button> </td>
			 		<td> {{product.price * product.number}}元</td>
			 		<td> <button class="btn btn-danger" @click="remove(index)">移除</button> </td>
			 	</tr>
			 </table>
			 <div class="pull-right"> <button @click="clear()" type="button" class="btn btn-danger">清空购物车</button> 
			 
				   <span class="text-success">总金额: {{cul()}} 元</span>
			 </div>
		</div>
		
	</body>
	
	<script>
		
		var vue = new Vue({
			el:"#app",
			data:{
				products:[{name:"娃娃气",img:"https://img0.baidu.com/it/u=3030325702,1144960403&fm=26&fmt=auto&gp=0.jpg",price:78,number:10},
						{name:"气球",img:"https://img0.baidu.com/it/u=3030325702,1144960403&fm=26&fmt=auto&gp=0.jpg",price:100,number:1},
						{name:"0.0.0.",img:"https://img0.baidu.com/it/u=3030325702,1144960403&fm=26&fmt=auto&gp=0.jpg",price:1000,number:10}
]
			},
			methods:{
				remove:function(index){
					this.products.splice(index,1);
				},
				cul:function(){
					var total = 0;
					
					for(var index in this.products){
						total += this.products[index].price*this.products[index].number;
					}
					
					return total;
				},
				clear:function(){
					this.products = [];
				}
			}
		});
		
	</script>
	
</html>
